<template>
  <div style="padding: 16px;">
    <el-skeleton :rows="5" :loading="data.isFirst" animated>
      <el-descriptions title="部门详情" direction="vertical" :column="3" border>
        <template #extra>
          <el-button @click="events.toggleEdit" :type="!data.isEdit ? 'warning' : 'danger'">{{ data.isEdit ? '保存' : '编辑' }}</el-button>
        </template>

        <el-descriptions-item width="33%" label="部门名称">
          <template v-if="!data.isEdit"> {{ data.data.name }}</template>
          <el-input v-else type="text" v-model="data.data.name"></el-input>
        </el-descriptions-item>
        <el-descriptions-item width="33%" label="使用次数">
          {{ data.data.count }}
        </el-descriptions-item>
        <el-descriptions-item width="33%" label="创建时间">
          {{ data.data.time }}
        </el-descriptions-item>
        <el-descriptions-item label="等级">
          <template v-if="!data.isEdit">{{ data.data.dlv }}</template>
          <el-input-number v-else v-model="data.data.dlv" :min="0" :max="100" controls-position="right" placeholder="等级">
          </el-input-number>
        </el-descriptions-item>



        <el-descriptions-item  label="描述">
          <template v-if="!data.isEdit">{{ data.data.explain }}</template>
          <el-input v-else type="text" v-model="data.data.explain"></el-input>
        </el-descriptions-item>



        <el-descriptions-item label="是否禁用">
          {{ data.data.isBan }}
        </el-descriptions-item>
        <el-descriptions-item label="子级" :span="3">
          <div style="margin-bottom: 8px;">
            <el-button type="primary" @click="events.add">新增</el-button>
          </div>
          <el-table :data="data.user">
            <el-table-column label="序号" type="index" width="60"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" width="150" label="名称" prop="name"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="账号" prop="account"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="性别" prop="sex"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="职务" prop="duties"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="加入时间" prop="datetime"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" width="150" fixed="right" label="操作" prop="value">
              <template #default="scope">
                <el-popconfirm title="确认删除吗？" @confirm="events.del_dictionary(scope.row.id)">
                  <template #reference>
                    <el-button size="small" plain type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-descriptions-item>
      </el-descriptions>

      <el-dialog v-model="data.isOpen" title="新增用户" width="800">
        <add_org @myclose="events.myclose" :data="data.data.id"></add_org>
      </el-dialog>
    </el-skeleton>
  </div>
</template>

<script setup lang="ts">
import { Get_Dept, Get_Dept_Users, Update_dept } from '@/api/org';
import { notice } from '@/utils/notice';
import type { Dictionary_Detail_Data } from '@/utils/types';
import add_org from '@/components/org/add_org.vue';

import { onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();

const data = reactive<Dictionary_Detail_Data>({
  isFirst: true,
  data: {
    id: '',
    name: '',
    count: 0,
    time: '',
    dlv: 0,
    explain: '',
    isBan: false,
  },
  user: [],
  isEdit: false,
  isOpen: false,
});

const originalData = reactive({
  id: '',
  name: '',
  count: 0,
  time: '',
  dlv: 0,
  explain: '',
  isBan: false,
});

const methods = {
  async bind() {
    const res = await Get_Dept({
      id: route.params.id.toString()
    });
    if (res.code === 0) {
      Object.assign(data.data, res.data.data[0]);
      // 备份原始数据以便取消编辑时恢复
      Object.assign(originalData, res.data.data[0]);
    }
  },
  async user() {
    const res = await Get_Dept_Users({
      id: route.params.id.toString()
    });
    if (res.code === 0) {
      data.user = res.data.data;
    }
  }
};

const events = {
  myclose() {
    data.isOpen = false;
    methods.bind();
  },
  /**
   * 新增字典
   */
  add() {
    data.isOpen = true;
  },
  // 切换编辑模式
  toggleEdit() {
    if (data.isEdit) {
      events.saveChanges();
    } else {
      data.isEdit = true;
    }
  },
  // 保存更改
  async saveChanges() {
    try {
      const res = await Update_dept({
        id: data.data.id,
        name: data.data.name,
        dlv: data.data.dlv,
        explain: data.data.explain,
      });
      if (res.code === 0) {
        notice({ code: 0, message: '部门信息更新成功' });
        data.isEdit = false;
      } else {
        notice(res);
      }
    } catch (error) {
      console.error('更新部门信息失败', error);
      notice({ code: -1, message: '更新部门信息失败' });
    }
  },
  async del_dictionary(id: string) {
    const res = await del_dictionarys({
      ids: [id]
    });
    notice(res);
    if (res.code === 0) {
      methods.bind();
    }
  }
};

onMounted(async () => {
  await methods.bind();
  await methods.user();
  data.isFirst = false;
});
</script>

<style scoped></style>
